<template>
	<view>
		<view style="margin-top: 50rpx; line-height: 80rpx; height: 80rpx; " class="text-center flex w9">
			<view class="flex1 blod top-border left-border right-border">姓名</view>
			<view class="flex1 top-border right-border">张三</view>
			<view style="flex: 1.2;" class="blod top-border right-border<strong></strong>">身份证号</view>
			<view class="flex3 top-border right-border">341126199009017722</view>
		</view>
		<view style="line-height: 80rpx; height: 80rpx; " class="text-center flex w9">
			<view class="flex1 blod top-border left-border right-border">性别</view>
			<view class="flex1 top-border right-border">男</view>
			<view style="flex: 1.2;" class="blod top-border right-border<strong></strong>">出生年月</view>
			<view class="flex3 top-border right-border">1990/09/01</view>
		</view>
		<view style="line-height: 80rpx; height: 80rpx; " class="text-center flex w9">
			<view class="flex1 blod top-border left-border right-border">开户行</view>
			<view class="flex4 top-border right-border">凤阳县招商银行</view>
		</view>
		<view style="line-height: 80rpx; height: 80rpx; " class="text-center flex w9">
			<view class="flex1 blod top-border left-border right-border">银行卡号</view>
			<view class="flex4 top-border right-border">6217000210008312216</view>
		</view>
		<view style=" height: 80rpx; " class="text-center flex w9">
			<view style="line-height: 80rpx;" class="flex1 blod top-border left-border right-border">户籍地址</view>
			<view style="font-size: 30rpx;" :style="{lineHeight: `${linH}rpx`}" class="text-left flex4 top-border right-border">{{title}}</view>
		</view>
		<view style="line-height: 80rpx; height: 80rpx; " class="text-center flex w9 bottom-border">
			<view class="flex1 blod top-border left-border right-border">现居地址</view>
			<view style="font-size: 30rpx;" :style="{lineHeight: `${linH}rpx`}" class="text-left flex4 top-border right-border">{{title}}</view>
		</view>
		<view style="height: 250rpx; " class="text-center flex w9">
			<view style="line-height: 250rpx;" class="flex1 blod bottom-border left-border right-border">反馈意见</view>
			<view class="flex4 bottom-border right-border text-left">
				<view style="margin-top: 20rpx;" class="flex">
					<textarea style=" height: 200rpx; margin: 0 10rpx; display: block; width: 300rpx;"></textarea>
					<view style="width: 200rpx;">
						<slide-choice style="width: 200rpx;" @changeChoice="changeChoice"></slide-choice>
						<view style="margin: 15rpx auto; width: 140rpx; height: 10rpx;">
							<butt :bgc="bgc" content="提交"></butt>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import imgSlide from "../../components/ui/tg-img-slide.vue"
	import butt from '../../components/ui/myButt.vue'
	import slideChoice from '../../components/ui/tg-slide.vue'
	export default {
		components:{
			butt,
			imgSlide,
			slideChoice
		},
		computed:{
			linH:{
				get(){
					if(this.title.length > 18){
						return 40
					}else{
						return 80
					}
				}
			}
		},
		data() {
			return {
				title:"安徽省滁州市凤阳县府城镇府东社区委员会l栋2单—",
				bgc:'#33B0FF'
			}
		},
		onLoad() {
		},
		methods: {
			changeChoice(e){
				console.log(e)
				if(e.index == 0 ){
					this.bgc = '#33B0FF'
				}else{
					this.bgc = '#FF6B6B'
				}
				this.$emit('changeChoice',e)
			}
		}
	}
</script>
<style scoped>
	.top-border{
		border-top: 1rpx solid #808080;
	}
	.left-border{
		border-left: 1rpx solid #808080;
	}
	.bottom-border{
		border-bottom: 1rpx solid #808080;
	}
	.right-border{
		border-right: 1rpx solid #808080;
	}
</style>
